<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta charset="ISO-8859-1">
<title>JQuery Mobile test</title>
</head>
<body>
<body>
    <script>
    	$(function() {
            $("#callAjax").click(function() {
            	$("#resultLog").empty();
                var theName = $.trim($("#theName").val());
                if(theName.length > 0) {
             		$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+theName+'&sensor=true', function(json) { 
            	 		for (i = 0; i < json.results.length; i++) {	  
            	 			$("#resultLog").append("<h3>"+json.results[i].formatted_address+"</h3><br>");
            			}
    				}); 
                }
            }); //click function
 
            $("#resultLog").ajaxError(function(event, request, settings, exception) {
            	$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
        	});
       });
    </script>
 
    <div data-role="page" id="indexPage">
        <div data-role="header">
            <h1>JQuery Mobile</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="theName">Please enter city name:</label>
                <input type="text" id="theName" name="theName" value="" />
            </div>
            <input id="callAjax" type="button" value="Lookup city" />
            <div id="resultLog" style="background-color:orange"></div>
        </div>
 
        <div data-role="footer">
            <h1>AJAX Prototype</h1>
        </div>
    </div>
 
</body>
</html>